import React, { Component } from 'react'
import qs from 'query-string'
import Tab from './../../components/common/TabVertical'
import Content from './../../components/common/Content'
import Page from './../../components/common/Page'
import api from './../../serve/api'
import './HomeHeader.css'
import { withRouter } from 'react-router-dom'
 class HomeHeader extends Component {

  constructor(props) {
    super(props)
    const { item } = qs.parse(props.location.search)
    let selected = 0
    if (item === 'advice') {
      selected = 0
    } else if (item === 'course') {
      selected = 1
    } else {
      selected = 2
    }
    this.state = {
      tabs: [{
        name: '通知公告'
      }, {
        name: '课题管理'
      }, {
        name: '文件下载'
      }],
      select: selected,
      currentPage: 1,
      datas: [],
      totalPage: 1
    }
  }
  componentDidMount() {
    const { item } = qs.parse(this.props.location.search)
    if (item === 'advice') {
      this.getAdvice(this.state.currentPage)
    } else if (item === 'course') {
      this.getCourse(this.state.currentPage)
    } else {
      this.getFiles(this.state.currentPage)
    }
  }

  async getAdvice(page) {
    const data = await api.listAdviceApi({  
      page,
      pageSize: 10
    })
    if (data && data.code === '000000') {
      this.setState({
        currentPage: page,
        datas: data.result,
        totalPage: data.resultNum
      })
    }
  }

  async getCourse(page) {
    const data = await api.listCourseApi({
      page,
      pageSize: 10
    })
    if (data && data.code === '000000') {
      if (data.result.length > 0) {
        const datas = data.result.map(item => {
          return {
            ...item,
            title: item.name
          }
        })
        this.setState({
          currentPage: page,
          datas,
          totalPage: data.resultNum
        })
      }
    }
  }

  async getFiles(page) {
    const data = await api.listFileApi({  
      page,
      pageSize: 10
    })
    if (data && data.code === '000000') {
      this.setState({
        currentPage: page,
        datas: data.result,
        totalPage: data.resultNum
      })
    }
  }

  async getDeatail() {

  }

  onTab(index) {
    if (index === 0) {
      this.getAdvice(1)
    } else if (index === 1) {
      this.getCourse(1)
    } else {
      this.getFiles(1)
    }
    this.setState({
      select: index
    })
  }

  getCurrentPage(currentPage) {
    const { select } = this.state
    if (select === 0) {
      this.getAdvice(currentPage)
    } else if (select === 1) {
      this.getCourse(currentPage)
    } else {
      this.getFiles(currentPage)
    }
  }

  onRow(value) {
    const { select } = this.state 
    let type = ''
    let url = ''
    if (select === 0) {
      type = 'advice'
      url = `/mainPage/pageDetail/advice/${value.id}`
    } else if (select === 1) {
      type = 'course'
      url = `/mainPage/pageDetail/course/${value.id}`
    } else {
      type = 'file'
      url = `/mainPage/pageDetail/file/${value.id}`
    }
    this.props.history.push(url)
  }


  render() {
    const { datas, totalPage, currentPage, select } = this.state
    return (
      <div className="home_header">
        <Tab tabs={this.state.tabs} selected={select} onTab={(item, index) => this.onTab(index)} />
        <div className="header_content">
          <Content datas={datas} onItem={item => this.onRow(item)} />
          <Page
            pageConfig={{ totalPage, pageSize: 10, currentPage }}
            pageCallbackFn={currentPage => this.getCurrentPage(currentPage)}
          />
        </div>
      </div>
    )
  }
}
export default withRouter(HomeHeader)